var React = require('react');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');
module.exports = function AssignRoleDialog(props) {
  return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ModalDialog, {
    dialogTitle: "${t('ui.account.user.dialog.assignRole')}"
  }, /*#__PURE__*/ React.createElement(ModalBody, null, /*#__PURE__*/ React.createElement("form",
    null, /*#__PURE__*/ React.createElement("nav", null, /*#__PURE__*/ React.createElement("div", {
      className: "nav nav-tabs",
      role: "tablist"
    }, /*#__PURE__*/ React.createElement("button", {
      "data-x-ui": "assignedRoleNavTab",
      className: "nav-link active",
      type: "button",
      role: "tab",
      "data-toggle": "tab"
    }, "${t('ui.account.assignRoleDialog.tab.assignedRole')}"), /*#__PURE__*/ React.createElement(
      "button", {
        "data-x-ui": "assignableRoleNavTab",
        className: "nav-link",
        type: "button",
        role: "tab",
        "data-toggle": "tab",
        disabled: true
      }, "${t('ui.account.assignRoleDialog.tab.assignableRole')}"))), /*#__PURE__*/ React.createElement(
    "div", {
      className: "tab-content"
    }, /*#__PURE__*/ React.createElement("div", {
      "data-x-ui": "assignedRoleTabPane",
      className: "tab-pane fade show active",
      role: "tabpanel"
    }, /*#__PURE__*/ React.createElement("table", {
      "data-x-ui": "assignedRoleTable",
      className: "x-table-custom",
      "data-x-name": "assignedRoles",
      "data-x-type": "dataGrid"
    }, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr",
      null, /*#__PURE__*/ React.createElement("th", {
        "data-field": "id",
        "data-visible": "false"
      }, "ID"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "roleCode"
      }, "${t('ui.security.role.field.roleCode')}"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "roleName"
      }, "${t('ui.security.role.field.roleName')}"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "effectiveFlagDesc"
      }, "${t('ui.system.common.field.effectiveFlag')}"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "remark"
      }, "${t('ui.system.common.field.remark')}"), /*#__PURE__*/ React.createElement("th", null,
        "${t('ui.system.common.field.operate')}"))))), /*#__PURE__*/ React.createElement("div", {
      "data-x-ui": "assignableRoleTabPane",
      className: "tab-pane fade",
      role: "tabpanel"
    }, /*#__PURE__*/ React.createElement("div", {
      className: "x-search-bar"
    }, /*#__PURE__*/ React.createElement("form", null, /*#__PURE__*/ React.createElement("div", {
      className: "form-row align-items-center"
    }, /*#__PURE__*/ React.createElement("div", {
      className: "col-auto"
    }, /*#__PURE__*/ React.createElement("label", {
      className: "sr-only",
      htmlFor: "roleCode"
    }), /*#__PURE__*/ React.createElement("div", {
      className: "input-group mb-2"
    }, /*#__PURE__*/ React.createElement("div", {
      className: "input-group-prepend"
    }, /*#__PURE__*/ React.createElement("div", {
      className: "input-group-text"
    }, "${t('ui.security.role.field.roleCode')}")), /*#__PURE__*/ React.createElement("input", {
      type: "text",
      className: "form-control",
      id: "roleCode",
      "data-x-name": "searchRoleField.roleCode"
    }))), /*#__PURE__*/ React.createElement("div", {
      className: "col-auto"
    }, /*#__PURE__*/ React.createElement("label", {
      className: "sr-only",
      htmlFor: "roleName"
    }), /*#__PURE__*/ React.createElement("div", {
      className: "input-group mb-2"
    }, /*#__PURE__*/ React.createElement("div", {
      className: "input-group-prepend"
    }, /*#__PURE__*/ React.createElement("div", {
      className: "input-group-text"
    }, "${t('ui.security.role.field.roleName')}")), /*#__PURE__*/ React.createElement("input", {
      type: "text",
      className: "form-control",
      id: "roleName",
      "data-x-name": "searchRoleField.roleName"
    }))), /*#__PURE__*/ React.createElement("div", {
      className: "col-auto"
    }, /*#__PURE__*/ React.createElement("button", {
      type: "button",
      className: "btn btn-primary mb-2",
      "data-x-ui": "searchRoleBtn"
    }, "${t('ui.system.common.btn.search')}"))))), /*#__PURE__*/ React.createElement("table", {
      "data-x-ui": "assignableRoleTable",
      className: "x-table-custom"
    }, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr",
      null, /*#__PURE__*/ React.createElement("th", {
        "data-checkbox": "true"
      }), /*#__PURE__*/ React.createElement("th", {
        "data-field": "id",
        "data-visible": "false"
      }, "ID"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "roleCode"
      }, "${t('ui.security.role.field.roleCode')}"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "roleName"
      }, "${t('ui.security.role.field.roleName')}"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "effectiveFlagDesc"
      }, "${t('ui.system.common.field.effectiveFlag')}"), /*#__PURE__*/ React.createElement("th", {
        "data-field": "remark"
      }, "${t('ui.system.common.field.remark')}"), /*#__PURE__*/ React.createElement("th", null,
        "${t('ui.system.common.field.operate')}")))))))), /*#__PURE__*/ React.createElement(ModalFooter, {
    confirmLabel: "${t('ui.system.common.btn.save')}",
    cancelLabel: "${t('ui.system.common.btn.cancel')}"
  })));
};